<template>
    <div class="worklist" v-if="list.length">
        <div v-for="(item, i) in list" :key="i" class="item-box" @click="toDetail(item)">
            <div class="left">
                <div class="top">{{item.title}}</div>
                <div class="bottom">
                    <p v-show="item.createTime">{{item.createTime}}</p>
                    <p v-show="item.ydl">{{item.ydl}}阅读量</p>
                </div>
                <div class="bottom">
                    <p>展示类别：{{item.isImage === 0 ? '视频' : '图片'}}</p>
                </div>
            </div>
            <!-- <div class="right" v-if="item.image"> -->
                <!-- <img :src="item.image" alt=""> -->
                <!-- <video class="video" controls>
                  <source :src="item.image" type="video/mp4">
                  <source :src="item.image" type="video/ogg">
                  您的浏览器不支持Video标签。
                </video> -->
            <!-- </div> -->
        </div>
    </div>
    <div v-else class="loading-status">
        <div v-if='loaded'>暂无相关信息</div>
    </div>
</template>

<script>
import * as api from '../assets/js/api';
export default {
  data() {
    return {
      loaded: false,
      list: []
    };
  },
  mounted() {
    // document.title = this.$route.query.title || '列表';
    // const method = this.$route.query.method;
    // if (!method) { return; }
    this['jbxx1QuerydataFczsList']().then(res => {
      if (res.code.status === '1') {
        this.loaded = true;
        this.list = res.data;
      } else {
        this.$toast('获取数据失败');
      }
    });
  },
  methods: {
    ...api,
    toDetail(item) {
      // this.$router.push({name: 'presenceShowDetails', params: {data: item}});
      if (item.isImage === 0) {
        this.$router.push({ name: 'presenceShowDetails', params: { data: item } });
      } else {
        this.$router.push({
          path: '/newsDetails',
          query: {
            id: item.jbxxId,
            title: '详情',
            method: 'jbxx1querydata4object',
            images: item.image
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.worklist {
  padding: 22px;
  .video {
    width: 100%;
    height: 154px;
  }
  .item-box {
    width: 704px;
    height: 210px;
    box-sizing: border-box;
    background: #ffffff;
    display: grid;
    padding: 28px;
    grid-template-columns: 1fr 200px;
    grid-column-gap: 20px;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    margin-bottom: 22px;
    .left {
      overflow: hidden;
      .top {
        font-size: 36px;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bottom {
        margin-top: 15px;
        color: #888888;
        font-size: 28px;
        display: flex;
        p {
          margin-right: 14px;
        }
      }
      .bottom:nth-child(3) {
        margin-top: 10px;
      }
    }
    .right {
      img {
        width: 200px;
        height: 150px;
      }
    }
  }
}
.loading-status{
    display: flex;
    height: 100%;
    background: #fff;
    color: #bbb;
    font-size: 34px;
    align-items: center;
    justify-content: center;
}
</style>
